<template>
    <div class="article-edit">
        <el-card class="!border-none" shadow="never">
            <el-page-header :content="$route.meta.title" @back="$router.back()" />
        </el-card>
        <el-card class="mt-4 !border-none" shadow="never">
            <el-form ref="formRef" class="ls-form" :model="formData" label-width="85px" :rules="rules">
                <div class="xl:flex">
                    <div>
                        <el-form-item label="男方姓名" prop="name_m">
                            <div class="w-80">
                                <el-input v-model="formData.name_m" placeholder="请输入男方姓名" />
                            </div>
                        </el-form-item>
                        <el-form-item label="女方姓名" prop="name_w">
                            <div class="w-80">
                                <el-input v-model="formData.name_w" placeholder="请输入女方姓名" />
                            </div>
                        </el-form-item>
                        <el-form-item label="男方证件" prop="number_m">
                            <div class="w-80">
                                <el-input v-model="formData.number_m" placeholder="请输入男方证件号码" />
                            </div>
                        </el-form-item>
                        <el-form-item label="女方证件" prop="number_w">
                            <div class="w-80">
                                <el-input v-model="formData.number_w" placeholder="请输入女方证件号码" />
                            </div>
                        </el-form-item>
                        <el-form-item label="登记类型" prop="cid">
                            <el-select class="w-80" v-model="formData.cid" placeholder="请选择登记类型" clearable>
                                <el-option v-for="item in optionsData.article_cate" :key="item.id" :label="item.name"
                                    :value="item.id" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="录入机关" prop="jiguan">
                            <div class="w-80">
                                <el-input v-model="formData.jiguan" placeholder="请输入登记信息录入机关" />
                            </div>
                        </el-form-item>
                        <el-form-item label="登记日期" prop="dengji_time">
                            <div class="w-80">
                                <el-input v-model="formData.dengji_time" placeholder="请输入登记信息录入机关" />
                            </div>
                        </el-form-item>

                    </div>

                </div>
            </el-form>
        </el-card>
        <footer-btns>
            <el-button type="primary" @click="handleSave">保存</el-button>
        </footer-btns>
    </div>
</template>

<script lang="ts" setup name="articleListsEdit">
import type { FormInstance } from 'element-plus'
import { useDictOptions } from '@/hooks/useDictOptions'
import { articleDetail, articleEdit, articleAdd, articleCateAll } from '@/api/article'
import useMultipleTabs from '@/hooks/useMultipleTabs'

const route = useRoute()
const router = useRouter()
const formData = reactive({
    id: '',
    name_m: '',
    name_w: '',
    number_m: '',
    number_w: '',
    dengji_time: '',
    cid: '',
    jiguan: '',
    is_show: 1
})

const { removeTab } = useMultipleTabs()
const formRef = shallowRef<FormInstance>()
const rules = reactive({
    title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
    cid: [{ required: true, message: '请选择文章栏目', trigger: 'blur' }]
})

const getDetails = async () => {
    const data = await articleDetail({
        id: route.query.id
    })
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = data[key]
    })
}

const { optionsData } = useDictOptions<{
    article_cate: any[]
}>({
    article_cate: {
        api: articleCateAll
    }
})

const handleSave = async () => {
    await formRef.value?.validate()
    if (route.query.id) {
        await articleEdit(formData)
    } else {
        await articleAdd(formData)
    }
    removeTab()
    router.back()
}

route.query.id && getDetails()
</script>
